<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户管理</title>
    <base href="/">

    <link rel="shortcut icon" href="assets/media/image/favicon.png"/>
    <link rel="stylesheet" href="vendors/bundle.css" type="text/css">
    <link rel="stylesheet" href="vendors/datepicker/daterangepicker.css">
    <link rel="stylesheet" href="vendors/vmap/jqvmap.min.css">
    <link rel="stylesheet" href="assets/css/app.css" type="text/css">
    <!--弹窗CSS-->
    <link rel="stylesheet" href="assets/css/modal.css" type="text/css">
</head>
<body class="container">

<div class="preloader">
    <div class="preloader-icon"></div>
</div>

<!--引入公共头部页面-->
<div th:replace="~{commons/header :: header}"></div>

<div id="main">
    <!--引入公共导航栏页面-->
    <div th:replace="~{commons/navigation :: navigation}"></div>

    <!-- begin::主要内容 -->
    <div class="main-content">
        <div class="container-fluid card">
            <!--搜索-->
            <div class="row" style="padding-top: 15px">
                <div class="col-md-6">
                    <div class="dataTables_length" id="example2_length">
<!--                        <label>Show entries-->
                        <label>显示数量
                            <select disabled readonly name="example2_length" aria-controls="example2"
                                    class="custom-select custom-select-sm form-control form-control-sm">
                                <option value="6">6</option>
                                <option value="10">10</option>
                                <option value="25">25</option>
                                <option value="50">50</option>
                            </select></label>
                    </div>
                </div>
                <div class="col-md-6" style="float: right;position: relative">
                    <div id="example2_filter" class="dataTables_filter">
<!--                        <label class="col-md-6">Search:-->
                        <label class="col-md-6">搜 索:（如输入“刘备”，按回车）
                            <input th:value="${key}" id="search" type="search" class="form-control form-control-sm" placeholder="">
                        </label>
                        <a href="/user/add_user" style="border-radius: 8px; position: absolute;bottom: 8px;right: 15px" class="page-link">添加用户</a>
                    </div>
                </div>
            </div>
            <!--表格-->
            <div class="row">
                <div th:if="${message} ne null" style="width: 400px;" class="alert alert-success"
                     role="alert" >[[${message}]]
                </div>

                <div class="col-md-12">
                    <!--<div th:if="${errormessage} ne null" style="width: 400px;" class="alert alert-danger"
                         role="alert" >[[${errormessage}]]
                    </div>-->
                    <table id="myTable" class="table table-bordered text-center">
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>姓名</th>
                            <th>用户名</th>
                            <th>单位</th>
                            <th>部门</th>
                            <th>角色</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="user-table">
                        <tr th:each="user:${users}">
                            <td th:text="${user.id}">1</td>
                            <td th:text="${user.name}">刘备</td>
                            <td th:text="${user.username}">liuhuangshu123</td>
                            <td th:text="${user.companyName}">江南皮革厂</td>
                            <td th:text="${user.departmentName}">草鞋贩卖部</td>
                            <td th:if="${user.role==0}">分公司管理员</td>
                            <td th:if="${user.role==1}">燃料业务人员</td>
                            <td th:if="${user.role==2}">监察人员</td>
                            <td th:if="${user.role==3}">管理人员</td>
                            <td th:if="${user.role==4}">公告通知发布人员</td>

                            <td>
                                <div class="dropdown">
                                    <a class="btn btn-sm" data-toggle="dropdown" aria-haspopup="true"
                                       aria-expanded="false">
                                        <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
                                    </a>
                                    <div class="dropdown-menu dropdown-menu-right">
                                        <button class="dropdown-item" type="button">删除用户</button>
                                        <a th:href="@{/user/password_modify(userId=${user.id})}" id="password_modify"
                                           class="dropdown-item" type="button">修改密码</a>
                                        <a th:href="@{/user/info_modify(userId=${user.id})}" id="info_modify"
                                           class="dropdown-item" type="button">修改信息</a>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <!--分页-->
            <div class="row" style="padding-bottom: 15px">
                <div class="col-sm-12 col-md-12">
                    <nav aria-label="...">
                        <ul class="pagination" id="user-pagination">

                            <li th:class="${currentPage==1?'disabled page-item':'page-item'}">
                                <a class="page-link" tabindex="-1" aria-disabled="true" th:href="@{${#request.getServletPath()}(pageIndex=${currentPage -1},pageSize=${pageSize})}">上一页</a>
                            </li>
                            <li th:class="${currentPage+1==i?'active page-item':'page-item'}" th:each="i:${#numbers.sequence(1,pageNum)}" th:if="${pageNum>0}">
                                <a class="page-link" th:text="${i}" th:href="@{${#request.getServletPath()}(pageIndex=${i},pageSize=${pageSize})}">1</a>
                            </li>
                            <li th:class="${currentPage==pageNum?'disabled page-item':'page-item'}">
                                <a class="page-link" th:href="@{${#request.getServletPath()}(pageIndex=${currentPage+1},pageSize=${pageSize})}">下一页</a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
        <!-- end::page content -->

        <!-- begin::footer -->
        <footer>
            <div class="container-fluid">
                <div>© 2019 Protable v1.0.0 Made by <a href="http://bootstrapmb.com">Laborasyon</a></div>
                <div>
                    <nav class="nav">
                        <a href="" class="nav-link">Licenses</a>
                        <a href="#" class="nav-link">Change Log</a>
                        <a href="#" class="nav-link">Get Help</a>
                    </nav>
                </div>
            </div>
        </footer>
        <!-- end::footer -->

    </div>
</div>
<!--引入公共的JavaScript脚本-->
<div th:replace="~{commons/scripts :: scripts}"></div>
<script src="assets/js/app.js"></script>

<script th:inline="javascript">
    $(() => {

        /**
         * 在搜索框按回车搜索
         */
        $('#search').keydown(function (ev) {
            if (ev.keyCode === 13) {
                let key = this.value.trim();
                window.location.href = '/user/query?key=' + key;
            }
        })

        /**
         * 删除用户的逻辑
         */
        $('#user-table > tr > td:nth-child(7) button:nth-child(1)').on('click', function () {
            //要删除用户的id
            let id = $(this).closest('tr').children().first().text()

            var mModal1 = new mModal({
                title: "提示", // 标题，默认：提示
                width: "25%", // 弹出框宽度，默认 25%
                top: "25vh", // 距离可视区域顶部距离 CSS中 margin-top 值
                content: "是否要删除该用户", // 正文，默认：正文内容
                cancelText: "取 消", // 取消按钮文本
                confirmText: "确 定", // 确定按钮文本
                showCancelButton: true, // 是否显示取消按钮
                showConfirmButton: true, // 是否显示确定按钮
                showClose: true, // 是否显示关闭按钮
                modal: true, // 是否需要遮罩层
                customClass: "", // 自定义类名confirm
                confirm: function () {
                    $.post("/user/del", {"id": id}, function (data) {
                        console.log(data.code)
                        if (data.code >= 0) {
                            console.log("dddd")
                            //删除成功
                            location.reload(true);
                        }
                    }, "json")
                    mModal1.close();
                },
            });
            mModal1.renderDom();
        })

        /**
         * Ajax更新用户列表的逻辑
         */
        $('#user-pagination').on('click', 'li a', function (ev) {
            let active = $('#user-pagination>li.active')
            //切换状态
            let pageIndex = 1;
            let pageSize = 6;
            active.removeClass("active");
            if ($(this).parent().index() == 0) {
                active.prev().addClass("active");
                pageIndex = active.prev().text()
            } else if ($(this).parent().index() == $('#user-pagination>li').length - 1) {
                active.next().addClass("active");
                pageIndex = active.next().text()
            } else {
                $(this).parent().addClass("active");
                pageIndex = $(this).text();
            }

            active = $('#user-pagination>li.active')
            if (active.index() == 1) {
                $('#user-pagination li').first().addClass("disabled");
            } else {
                $('#user-pagination li').first().removeClass("disabled");
            }
            let maxPage = $("#user-pagination > li > a").eq(-2).text();
            if (active.index() == maxPage) {
                $('#user-pagination li').last().addClass("disabled");
            } else {
                $('#user-pagination li').last().removeClass("disabled");
            }

            let key = /*[[${key}]]*/ "";
            let data;
            if (key === "") {
                data = {"pageIndex": pageIndex, "pageSize": pageSize};
            } else {
                data = {"pageIndex": pageIndex, "pageSize": pageSize, "key": key};
            }

            //更新表
            let url = "/user/json";
            $.post(url, data, function (data) {
                let trs = $('#user-table > tr');
                trs.each(function () {
                    this.hidden = true;
                })
                data.forEach(function (user, index) {
                    trs[index].removeAttribute("hidden")
                    trs.eq(index).find('td').eq(0).text(user.id)
                    trs.eq(index).find('td').eq(1).text(user.name)
                    trs.eq(index).find('td').eq(2).text(user.username)
                    trs.eq(index).find('td').eq(3).text(user.companyName)
                    trs.eq(index).find('td').eq(4).text(user.departmentName)
                    trs.eq(index).find('td').eq(5).text(user.role)
                    trs.eq(index).find('a#info_modify').attr("href", "/user/info_modify?userId=" + user.id);
                    trs.eq(index).find('a#password_modify').attr("href", "/user/password_modify?userId=" + user.id);
                    switch (user.role) {
                        case 0:
                            trs.eq(index).find('td').eq(5).text("分公司管理员");
                            break;
                        case 1:
                            trs.eq(index).find('td').eq(5).text("燃料业务人员");
                            break;
                        case 2:
                            trs.eq(index).find('td').eq(5).text("监察人员");
                            break;
                        case 3:
                            trs.eq(index).find('td').eq(5).text("管理人员");
                            break;
                        case 4:
                            trs.eq(index).find('td').eq(5).text("公告通知发布人员");
                            break;
                    }
                });
            }, "json");
            return false;
        })
    })

</script>
</body>
</html>
